<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"  href="小米.css" />
</head>
<body>
<!-- 页头 -->
    <div class="header">
        <div class="center">
            <div class="left">
            <a href="">小米商城</a>
            <span>|</span>
            <a href="">MIUI</a>
            <span>|</span>
            <a href="">ioT</a>
            <span>|</span>
            <a href="">云服务</a>
            <span>|</span>
            <a href="">天星数科</a>
            <span>|</span>
            <a href="">有品</a>
            <span>|</span>
            <a href="">小爱开放平台</a>
            <span>|</span>
            <a href="">企业团购</a>
            <span>|</span>
            <a href="">资质证照</a>
            <span>|</span>
            <a href="">协议规则</a>
            <span>|</span>
            <a href="">下载app</a>
            <span>|</span>
            <a href="">智能生活</a>
            <span>|</span>
        </div>
        <div class="right">
            <a href="">登录</a>
            <span>|</span>
            <a href="">注册</a>
            <span>|</span>
            <a href="">消息通知</a>
            </span>
            <div class="right-l">
            <a href=""><img src="img/购物车  .png">购物车  (0)</a>
            <section>
                <span>购物车中还没有商品，赶紧选购吧！</span>
            </section>
            </div>
        </div>
    </div>
<!-- 导航栏 -->
    <nav>
        <div class="subnav">
            <a href=""><img src="./img/小米.png" alt=""></a>
            <ul>
                <li><a href="">Xiaomi手机</a></li>
                <li><a href="">Redmi红米</a></li>
                <li><a href="">电视</a></li>
                <li><a href="">笔记本</a></li>
                <li><a href="">平板</a></li>
                <li><a href="">家电</a></li>
                <li><a href="">路由器</a></li>
                <li><a href="">服务</a></li>
                <li><a href="">社区</a></li>
            </ul>
            <form action="" class="input">
            <input type="text" class="text" placeholder="路由器">
            <input type="submit" class="submit" value="搜索">
            </form>
        </div>
    </nav>
 <!-- 轮播图栏 -->
        <div class="lb">
            <div class="left">
                <ul>
                    <li class="sj">
                        <a href="">手机<img src="./img/扩展.png" alt=""></a>
                        <section>
                        </section>
                    </li>
                    <li><a href="">电视<img src="./img/扩展.png" alt=""></a></li>
                    <li><a href="">笔记本 平板<img src="./img/扩展.png" alt=""></a></li>
                    <li><a href="">家电<img src="./img/扩展.png" alt=""></a></li>
                    <li><a href="">出行 穿戴<img src="./img/扩展.png" alt=""></a></li>
                    <li><a href="">智能 路由器<img src="./img/扩展.png" alt=""></a></li>
                    <li><a href="">电源 配件<img src="./img/扩展.png" alt=""></a></li>
                    <li><a href="">健康 儿童<img src="./img/扩展.png" alt=""></a></li>
                    <li><a href="">耳机 音响<img src="./img/扩展.png" alt=""></a></li>
                    <li><a href="">生活 箱包<img src="./img/扩展.png" alt=""></a></li>
                </ul>
            </div>
            <div class="right">   
            </div>
        </div>
<!-- 手机栏 -->
        <div class="sj">
            <div class="sj-1">
                <ul>
                    <li>
                        <a href=""><img src="./img/sj-1.png" alt=""><span>保障服务</span></a>
                    </li>
                    <li>
                        <a href=""><img src="./img/sj-2.png" alt=""><span>企业团购</span></a>
                    </li>
                    <li>
                        <a href=""><img src="./img/sj-3.png" alt=""><span>F码通道</span></a>
                    </li>
                    <li>
                        <a href=""><img src="./img/sj-4.png" alt=""><span>米粉卡</span></a>
                    </li>
                    <li>
                        <a href=""><img src="./img/sj-5.png" alt=""><span>以旧换新</span></a>
                    </li>
                    <li>
                        <a href=""><img src="./img/sj-6.png" alt=""><span>话费充值</span></a>
                    </li>
                </ul>
            </div>
            <div class="sj-2"><img src="./img/手机1.jpg" alt=""></div>
            <div class="sj-3"><img src="./img/手机2.png" alt=""></div>
            <div class="sj-4"><img src="./img/手机3.jpeg" alt=""></div>
        </div>

<!-- 主要内容 -->
        <main>
            <div class="banner">
                <img src="./img/bannerwebp.webp" alt="">
            </div>
            <p>手机<span>查看更多</span></p>
           <div class="box">
               <div class="left">
                   <img src="./img/手机侧栏.webp" alt="">
               </div>
               <div class="right">
                   <ul>
                       <li class="li">
                        <img src="./img/手机栏.webp" alt="">
                       </li>
                       <li class="li">
                        <img src="./img/手机栏.webp" alt="">
                       </li>
                       <li class="li">
                        <img src="./img/手机栏.webp" alt="">
                       </li>
                       <li class="li">
                        <img src="./img/手机栏.webp" alt="">
                       </li>
                       <li class="li">
                        <img src="./img/手机栏.webp" alt="">
                       </li>
                       <li class="li">
                        <img src="./img/手机栏.webp" alt="">
                       </li>
                       <li class="li">
                        <img src="./img/手机栏.webp" alt="">
                       </li>
                       <li class="li">
                        <img src="./img/手机栏.webp" alt="">
                       </li>
                   </ul>
               </div>
           </div>
           <div class="foot">
               <div class="footer">
                   <ul>
                       <li><a href="">预约维修服务</a></li>
                       <li><a href="">7天无理由退货</a></li>
                       <li><a href="">15天免费换货</a></li>
                       <li><a href="">满69包邮</a></li>
                       <li><a href="">520余家售后网点</a></li>
                   </ul>
               </div>
           </div>
        </main>
        

        </div>
</body>
</html>